import { message } from 'antd';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import API from '@/http';
import { useAuthStore } from '@/stores/auth';
import { useShallow } from 'zustand/react/shallow';

function ResetPasswordPanel() {
  const { username } = useAuthStore((state) => state.userInfo);
  const [oldPassword, setOldPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [bnewPassword, setbNewPassword] = useState('');
  const { t } = useTranslation();
  const [isAuthenticated, logout] = useAuthStore(
    useShallow((state) => [state.isAuthenticated, state.logout])
  );
  const navigate = useNavigate();
  const setValue = (e: any, set: any) => {
    set(e.target.value);
  };
  async function logoutAction() {
    try {
      await logout();
      navigate('/login');
    } catch (e) {
      console.error(e);
    }
  }

  const changePs = () => {
    if (newPassword != bnewPassword) {
      message.warning({
        content: t('passwordNoSame'),
      });
      return;
    }
    API.Setting.changePassword({
      data: {
        oldPassword,
        password: newPassword,
      },
    })
      .then((res: any) => {
        message.success({
          content: t('passwoedChangeSuccessful'),
        });
        logoutAction();
      })
      .catch((err: any) => {
        message.error({
          content: `${err}`,
        });
      });
  };
  return (
    <div className="mx-6 md:mx-12 flex w-full max-w-96 flex-col">
      <div className="mb-5 text-center text-20 text-ff leading-140 hidden md:block">
        {t('settingAcount')}
      </div>
      <div className='flex w-full flex-col bg-black rounded-md p-4  md:p-8'>
      <div className="font-boldleading-140 mb-2 text-ff text-14">
          {t('emailAddress')}
        </div>
        <input
          value={username}
          readOnly
          className="mb-2 text-ff h-10  bg-grey rounded-sm px-5 py-2 text-14 leading-140 outline-none"
        />
        {/* <div className="mb-7 flex space-x-2 text-center text-14 leading-140">
          <div className="font-medium"> {t('emailAddress')}</div>
          <div className="text-7b">{username}</div>
        </div> */}
        <div className="font-boldleading-140 mb-2 text-ff text-14">
          {t('changePassword')}
        </div>
        <input
          value={oldPassword}
          className="mb-2 text-ff h-10  bg-grey rounded-sm px-5 py-2 text-14 leading-140 outline-none"
          type="password"
          onChange={(e) => setValue(e, setOldPassword)}
          placeholder={t('oldPassword')}
        />
        <input
          value={newPassword}
          className="mb-2 text-ff h-10 bg-grey rounded-sm  px-5 py-2 text-14 leading-140 outline-none"
          type="password"
          onChange={(e) => setValue(e, setNewPassword)}
          placeholder={t('newPassword')}
        />
        <input
          value={bnewPassword}
          className="mb-7 text-ff h-10  bg-grey rounded-sm border-d2 px-5 py-2 text-14 leading-140 outline-none"
          type="password"
          onChange={(e) => setValue(e, setbNewPassword)}
          placeholder={t('renewPassword')}
        />
        <button
          onClick={changePs}
          className="rounded-lg bg-red py-2 text-14 md:text-16 leading-140 text-white shadow-btn active:translate-y-[1px] active:shadow-none"
        >
          {t('submit')}
        </button>
      </div>
    </div>
  );
}

export default ResetPasswordPanel;
